<template>
    <div>
        <el-table :data="paginatedData" style="width: 100%">
            <el-table-column prop="id" label="id" />
            <el-table-column prop="time" label="上传时间" />
            <el-table-column prop="userName" label="用户名" />
            <el-table-column prop="fileName" label="文件名" />
            <el-table-column prop="source" label="来源" />
            <el-table-column prop="remark" label="备注" />
        </el-table>
    </div>
    <div class="paginationDiv">
        <el-pagination layout="prev, pager, next" :total="total" :page-size="pagesize" :current-page="currentPage" @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts" setup>
import { inject, ref, computed, watch } from "vue";

const tableData: any = inject("tableData");

const search = ref(""); // 使用 ref() 包装
const pagesize = ref(10); // 指定展示多少条
const currentPage = ref(1); // 默认展示第几页
const total = ref(0);

// 计算过滤后的数据
const filteredData = computed(() => {
    return tableData.value.filter(
        (data: any) => !search.value || data.user.toLowerCase().includes(search.value.toLowerCase()) || data.tradeDescription.toLowerCase().includes(search.value.toLowerCase())
    );
});

// 计算分页后的数据
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pagesize.value;
    const end = currentPage.value * pagesize.value;
    return filteredData.value.slice(start, end);
});

// 监听过滤后的数据变化以更新 total
watch(
    filteredData,
    (newData) => {
        total.value = newData.length;
    },
    { immediate: true }
);

// 处理页码变化
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
};
</script>

<style scoped>
.paginationDiv {
    width: 100%;
    display: flex;
    justify-content: right;
}
</style>
